<template>
  <div class="forms">
    <div
      class="forms__item"
      :style="{
        'flex-direction': ['FileUpload'].includes(item.name) ? 'column' : 'row'
      }"
      v-for="item in formData"
      :key="item.name"
    >
      <div class="forms__item__label">{{ item.title }}</div>
      <div class="forms__item__value" v-if="isDirectComponent(item).value">{{ directComponentValue(item).value }}</div>
      <div class="forms__item__files" v-else-if="item.name === 'FileUpload'">
        <div class="file__list">
          <!--      todo: 可以message-file-list组件合并    -->
          <div class="file__list__item" v-for="fileItem in isArrayType(item).value" :key="fileItem.id">
            <div class="item-file">
              <img :src="messageFileIcon" />
              <span class="file-name" v-ellipsis="{ rows: 1, text: fileItem.name }"></span>
            </div>
            <div class="item-icon">
              <div class="item-icon__down">下载</div>
            </div>
          </div>
        </div>
      </div>
      <div class="forms__item__images" v-else-if="item.name === 'ImageUpload'">
        <a-image-preview-group infinite>
          <a-space wrap>
            <a-image
              v-for="imgItem in isArrayType(item).value"
              :key="imgItem.id"
              :src="imgItem.url"
              width="80"
              height="80"
              fit="cover"
            />
          </a-space>
        </a-image-preview-group>
      </div>
      <div class="forms__item__videos" v-else-if="item.name === 'VideoUpload'">
        <div
          @click="handelPreviewVideo(item)"
          v-for="videoItem in isArrayType(item).value"
          :key="videoItem.id"
          class="video-item"
        >
          <GiSvgIcon name="play-icon" size="29" color="#fff"></GiSvgIcon>
          <video :src="videoItem.url"></video>
        </div>
      </div>
      <div class="forms__item__voice" v-else-if="item.name == 'VoiceToText'">
        <span>{{ item?.value?.txt }}</span>
      </div>
      <div class="forms__item__link" v-else-if="item.name === 'HyperlinkInput'">
        <span @click="handelLink(item)">{{ `点击查看${item.title}` }}</span>
      </div>
      <div class="forms__item__users" v-else-if="item.name === 'UserPicker'">
        {{ userLabel(item).value }}
      </div>
      <div v-else>数据异常</div>
    </div>

    <preview-video v-if="isShowPreview" v-model="isShowPreview" :preview-video-url="previewVideoUrl" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import PreviewVideo from "@/components/previewVideo/index.vue";
import { isLink } from "@/utils/validate";
import useComputedParams from "@/hooks/useComputedParams";
import messageFileIcon from "@/assets/images/message-file.png";

defineProps({
  formData: Array as () => any[]
});

// const formData = ref([
//   {
//     title: "变更明细表",
//     name: "TextInput",
//     value: "2024-11-01"
//   },
//   {
//     title: "文件",
//     name: "FileUpload",
//     value: [
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       }
//     ]
//   },
//   {
//     title: "视频",
//     name: "VideoUpload",
//     value: [
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       }
//     ]
//   },
//   {
//     title: "超链接",
//     name: "HyperlinkInput",
//     value: "https://arco.design/vue/component/image"
//   },
//   {
//     title: "图片",
//     name: "ImageUpload",
//     value: [
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       },
//       {
//         id: "1",
//         name: "图片1",
//         url: "https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
//       }
//     ]
//   },
//   {
//     title: "录音",
//     name: "VoiceToText",
//     value: { txt: "录音" }
//   },
//   {
//     title: "成员",
//     name: "UserPicker",
//     value: [
//       {
//         name: "张三",
//         type: "客户"
//       }
//     ]
//   }
// ]);

const directComponents = [
  "CascaderInput",
  "DateTime",
  "EditorInput",
  "TextInput",
  "SelectInput",
  "TextareaInput",
  "MultipleSelect"
];
const isDirectComponent = useComputedParams(data => {
  return directComponents.includes(data.name);
});
const directComponentValue = useComputedParams(data => {
  return Array.isArray(data.value) ? data.value.join(",") : data.value;
});

/**
 * 判断数组类型值
 */
const isArrayType = useComputedParams(data => {
  return Array.isArray(data.value) ? data.value : [];
});

// 成员
const userLabel = useComputedParams(data => {
  return data.value?.map((item: any) => `${item?.type} - ${item?.name}`)?.join(",") ?? "";
});

const handelLink = (item: any) => {
  isLink(item.value) && window.open(item.value);
};

/**
 * 视频预览
 * @param data
 */
const isShowPreview = ref(false);
const previewVideoUrl = ref("");
const handelPreviewVideo = (data: any) => {
  isShowPreview.value = true;
  previewVideoUrl.value = data.value;
};
</script>

<style scoped lang="scss">
@import "messageDetailForm";
</style>
